<template>
  <div class="myorder">
    <el-menu
      :default-active="activeIndex"
      class="el-menu-demo"
      mode="horizontal"
      @select="handleSelect"
    >
      <el-menu-item index="0">待付款</el-menu-item>
      <el-menu-item index="2">待发货</el-menu-item>
      <el-menu-item index="3">待收货</el-menu-item>
      <el-menu-item index="4">待评价</el-menu-item>
      <el-menu-item index="1">已完成</el-menu-item>
    </el-menu>
    <el-table
      style="width: 100%"
      height="45px"
    >
      <el-table-column
        label=""
        width="110px"
      >
      </el-table-column>
      <el-table-column
        label="宝贝"
        width=""
      >
      </el-table-column>
      <el-table-column
        label="单价"
        width="90px"
      >
      </el-table-column>
      <el-table-column
        label="数量"
        width="60px"
      >
      </el-table-column>
      <el-table-column
        label="收货人"
        width="120px"
      >
      </el-table-column>
      <el-table-column
        label="实付款"
        width="80px"
      >
      </el-table-column>
      <el-table-column
        label="状态"
        width="80px"
      >
      </el-table-column>
      <el-table-column
        label="操作"
        width="80px"
      >
      </el-table-column>
    </el-table>
    <div>
      <div
        v-for="item in Orderinfo"
        :key=" item.id"
        class="orderli"
      >
        <p class="title">
          订单编号：{{item.orderNum}}
        </p>
        <div
          v-for="items in item.orderItemList"
          :key="items.id"
          class="shop"
        >
          <el-row :gutter="10">
            <el-col :span="3">
              <img
                :src="'http://139.198.178.82:9090/Shopping/'+items.productList[0].defaultImg"
                alt=""
                style="width:80px;"
              >
            </el-col>
            <el-col :span="8">
              {{items.productList[0].name}}
            </el-col>
            <el-col :span="2">
              {{items.productList[0].shopPrice/100}}
            </el-col>
            <el-col :span="2">
              {{items.quantity}}
            </el-col>
            <el-col :span="3">
              <el-tag type="success">
                {{item.contactName==null?'待支付':item.contactName}}
              </el-tag>
            </el-col>
            <el-col :span="2">
              {{items.productList[0].shopPrice/100 * items.quantity}}
            </el-col>
            <el-col :span="2">

              <el-tag type="warning">
                {{item.paymentFlag=='1'?'已付款':'待支付'}}</el-tag>
            </el-col>
            <el-col :span="2">
              <a @click="goto('/center/orderdetail','OrderDetail',items.orderNum)">查看详情</a>
            </el-col>
          </el-row>
        </div>
      </div>
    </div>
    <div
      v-if="this.Orderinfo==''"
      class="tishi"
    >
      <p>你还没有订单哦~</p>
      <p>
        <el-button type="warning">
          <router-link
            to="/home"
            style="color:white"
          >去首页看看</router-link>
        </el-button>
      </p>
    </div>
  </div>
</template>

<script>
export default {
  name: "myorder",
  data() {
    return {
      activeIndex: "",
      Order: [],
      Orderinfo: [],
    };
  },
  methods: {
    getOrder() {
      this.$post(this.url + "/order/selectAll", {
        userId: this.$store.state.user.id,
        type: 0,
        nowPage: 1,
      }).then((res) => {
        if (res.errorCode == "0") {
          this.Order = res.data.paymentHistoryList;
          this.getorderinfo();
        }
      });
    },
    goto(path, name, val) {
      sessionStorage.setItem("ordernum", val);
      this.$router.push({
        path: path,
        name: name,
      });
    },
    handleSelect(index) {
      this.Orderinfo = [];
      this.$post(
        "http://139.198.178.82:9090/Shopping/api/v1/user/orders/list",
        {
          userId: this.$store.state.user.id,
          type: 0,
          paymentFlag: index,
          nowPage: 1,
        }
      ).then((res) => {
        if (res.errorCode == "0") {
          this.Order = res.data.orderListData;
          console.log(this.Order);
          this.getorderinfo();
        }
      });
    },
    // 获取订单商品
    getorderinfo() {
      this.Order.forEach((element) => {
        this.$post(this.url + "/order/orderDetail", {
          userId: this.$store.state.user.id,
          orderNum: element.orderNum,
        }).then((res) => {
          if (res.errorCode == "0") {
            this.Orderinfo.push(res.data.orderItemList);
          }
        });
      });
      console.log(this.Orderinfo);
    },
  },
  created() {
    this.getOrder();
  },
};
</script>

<style scoped>
h3 {
  margin: 0;
}
.title {
  height: 30px;
  line-height: 30px;
  text-indent: 20px;
  background-color: lightgray;
}
.shop {
  height: 90px;
  border-bottom: 1px solid lightgray;
}
p {
  margin-bottom: 10px;
}
.orderli {
  margin-top: 25px;
}
.tishi {
  text-align: center;
}
</style>
